<template>
	<table>
		<tr>
			<th v-for="item,index in thlist" :key="index">{{item}}</th>
		</tr>
		<tr class="td_tr" v-for="item,index in tableData" :key="index" @click="show = true">
			<td v-for="itm in item" :key="itm">{{itm}}</td>
		</tr>
	</table>
	<van-popup v-model:show="show" :style="{ width: '70%', height: '70%'}">
		<div class="pop_box">
			<div class="pop_cont">
				<div v-for="item,index in thlist" :key="index">
					<p>{{item}}</p>
					<div class="progress_box">
						<van-progress pivot-text="橙色" :color="setCor(item)" :percentage="25" stroke-width="8" />
						<span class="number">sss</span>
					</div>
					<div class="pop_btn_box">
						<div class="btn_left">
							<div @click="goReport(item)" class="report_btn">报告</div>
							<div class="del_btn" @click="onDelete(item)">删除</div>
						</div>
						<div class="btn_right">
							<span>时间</span>
						</div>
					</div>
					<span class="pop_type">预警</span>
				</div>
			</div>
			<div class="btn_box" @click="show = false">完成</div>
		</div>
	</van-popup>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import {useRouter,useRoute} from 'vue-router';
	import { showConfirmDialog, showSuccessToast  } from 'vant';
 	
	const ROUTER = useRouter();
	defineProps({
		tableData:{
			typo:Array as any,
			default:()=>[]
		}
	});
	
	
	const thlist = ['编号','患者姓名','性别','年龄','学历','项目数量','进度'];
	const show = ref(false);
	
	function setCor(row:any){
		return '#13ce8f';
	}
	
	const goReport = (row)=>{
		console.log(row);
		ROUTER.replace({path: '/report',query:row});
	};
	
	const onDelete = (row)=>{
		showConfirmDialog({ title: '',message: '确定删除此报告吗？',}).then(() => {
			showSuccessToast('删除成功');
		}).catch(() => {
		    showSuccessToast('取消删除');
		});
	};
</script>

<style lang="less" scoped>
	@import "./index.less";
	.progress_box{
		display: flex;
		align-items: center;
		.van-progress{
			margin: 10px 0;
			flex:1;
		}
		.number{
			margin-left: 10px;
		}
	}
</style>